<template>
	<view class="p-20">
		<view v-for="(item,index) in list" :key="index" class="item p-20 b-f b-r-20">
			<view class="top f f-a-c f-j-b">
				<view class="leftName">
					核销时间
				</view>
				<view class="rightTime">
					{{item.offset_at}}
				</view>
			</view>
			<view class="xian"></view>
			<view class="top f f-a-c f-j-b">
				<view class="leftName">
					上课开始时间
				</view>
				<view class="rightTime">
					{{item.start_at}}
				</view>
			</view>
			<view class="xian"></view>
			<view class="top f f-a-c f-j-b">
				<view class="leftName">
					本次读书会主题
				</view>
				<view class="rightTime">
					{{item.subject}}
				</view>
			</view>
			<view class="xian"></view>
			<view class="top f f-a-c f-j-b">
				<view class="leftName">
					阅读指导老师姓名
				</view>
				<view class="rightTime">
					{{item.teacher_name}}
				</view>
			</view>
			<view class="xian"></view>
			<!-- 这个是上课图片 -->
			<view class="ClassPicture">
				<view class="topName">
					上课图片
				</view>
				<view class="imgTu f f-a-c f-w-w">
					<image :src="ite" v-for="(ite,ind) in item.images.split(',')" class="shoop" mode="">
					</image>
					<!-- <image src="/static/home/4.png" class="shoop" mode=""></image> -->
					<!-- 	<image src="/static/home/4.png" class="shoop" mode=""></image>
					<image src="/static/home/4.png" class="shoop" mode=""></image>
					<image src="/static/home/4.png" class="shoop" mode=""></image> -->
				</view>
			</view>
			<view class="xian"></view>
			<view class="top f f-a-c f-j-b">
				<view class="leftName">
					文字备注
				</view>
				<view class="rightTime">
					{{item.remark}}
				</view>
			</view>
			<view class="xian"></view>
			<view class="top f f-a-c f-j-b">
				<view class="leftName">
					数据添加时间
				</view>
				<view class="rightTime">
					{{item.created_at}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1
			}
		},
		onShow() {
			this.initList()
		},
		onReachBottom() {
			this.page++
			this.initList()
			console.log('123456');
		},
		methods: {
			async initList() {
				let n = await this.$api.Book_club_offsets({
					page: this.page
				})
				this.list = [...this.list, ...n.data.data]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ClassPicture {
		.imgTu {
			.shoop {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
				margin-right: 1%;
				margin-bottom: 25rpx;
			}
		}

		.topName {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
			margin: 35rpx 0;
		}
	}

	.item {
		width: 100%;
		margin: 0 auto;
		padding-bottom: 40rpx;
		margin-bottom: 30rpx;

		.leftName {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}

		.xian {
			width: 100%;
			height: 2rpx;
			background-color: #f8f8f8;
			margin: 30rpx 0;
		}

		.rightTime {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #1a1a1a;
		}
	}
</style>